<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script language="JavaScript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js
"></script>
    <title>仿百度注册</title>
    <style>
        .register {
    width: 600px;
    margin: auto;
    border: 1px solid red;
    font-size: 14px;
    /*padding: 35px;*/
}

label {
    width:65px;
    text-align: right;
    display: block;
    float: left;
    line-height: 50px;
    margin-right:10px;
}


#inputError{
    width: 350px;
    height: 40px;
    /*margin: 2px 0px;*/
    border: 1px solid red;
}


input[type=button]{

    height: 45px;
    border: 1px solid #4281A9;
    cursor: pointer;
    width: 350px;
}
        input[text]:focus{
             outline: none;
            border: 1px solid red;
        }
        .err{
            width: 350px;
             height: 40px;
            outline: none;
            border: 1px solid red;
        }
.right{
            width: 350px;
             height: 40px;
            outline: none;
            border: 1px solid darkgray;
        }
    </style>
</head>
<body>

<div class="register">
    <form method="get">
    <p>
        <label>用户名</label><input class="right" name="username"  onblur="test(id)" id="a1" type="text" placeholder="请设置用户名"><img id="a2" style="margin-left: 5px; "src=""><h id="a4"></h>
    </label>
    </p>
        <label>手机号</label><input class="right" onblur="testTel(id)" id="Tel3"type="text"  placeholder="请填写手机号"><img id="Tel1" style="margin-left: 5px; "src=""><h id="Tel2"></h>
    </p>
    <p>
        <label>密码</label><input class="right" onblur="testPwd(id)" id="pwd3"type="password" placeholder="请设置用户密码"><img id="pwd1" style="margin-left: 5px; "src=""><h id="pwd2"></h>
    </p>
    <p>
        <label>验证码</label>
        <input type="text" class="right" placeholder="验证码" style="width: 205px">
        <input type="button" value="点击获取验证码" style="width: 143px">
    </p>
    <p style="margin-left: 75px;font-size: 12px">
        <input type="checkbox"> 阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
    </p>
    <p style="margin-left: 75px;">
        <input type="button" value="注册">
    </p>
    </form>
</div>
<script>


    //表单验证输入的是不是含有123456或者aaaaaa，有就提醒用户名被占用
    function test(x) {
        $.get("http://localhost:5000/check_form",{username:$("#a1").val()},function (data) {
                //$("#div1").html(data);
                alert(data);
                if(data==200){
                    document.getElementById("a2").src="ok_small.png"
                    document.getElementById(x).className="right"
                    document.getElementById("a4").innerHTML=""
                }else{
                    document.getElementById("a2").src="err_small.png"
                    document.getElementById(x).className="err"
                    document.getElementById("a4").innerHTML="  用户名被占用"
                    document.getElementById("a4").style.color="red"
                }
            })
    }


    // function test(x){
    //
    // //     $(document).ready(function () {
    // //     $("#button1").click(function () {
    // //         //$("#div1").load("http://192.168.123.51:5000");
    // //         // $.get("http://192.168.123.51:5000",function (data) {
    // //         //     $("#div1").html(data);
    // //         // })
    // //         $.post("http://192.168.123.51:5000",{"username":'123'},function (data) {
    // //             $("#div1").html(data);
    // //         })
    // //     })
    // //
    // // })
    //
    //
    //
    //     if(document.getElementById(x).value.length !=6 && (document.getElementById(x)!="123456"||document.getElementById(x)!="aaaaaa")){
    //         document.getElementById("a2").src="ok_small.png"
    //         document.getElementById(x).className="right"
    //         document.getElementById("a4").innerHTML=""
    //     }
    //     else{
    //         document.getElementById("a2").src="err_small.png"
    //         document.getElementById(x).className="err"
    //         document.getElementById("a4").innerHTML="  用户名被占用"
    //         document.getElementById("a4").style.color="red"
    //     }
    // }
    //号码必须十一位验证
    function testTel(x){

        if(document.getElementById(x).value.length==11){
            document.getElementById("Tel1").src="ok_small.png"
            document.getElementById(x).className="right"
            document.getElementById("Tel2").innerHTML=""
        }
        else{
            document.getElementById("Tel1").src="err_small.png"
            document.getElementById(x).className="err"
            document.getElementById("Tel2").innerHTML="  手机号码必须11位数"
            document.getElementById("Tel2").style.color="red"
        }
    }
    //密码必须大于8位验证
    function testPwd(x){

        if(document.getElementById(x).value.length>8){
            document.getElementById("pwd1").src="ok_small.png"
            document.getElementById(x).className="right"
            document.getElementById("pwd2").innerHTML=""
        }
        else{
            document.getElementById("pwd1").src="err_small.png"
            document.getElementById(x).className="err"
            document.getElementById("pwd2").innerHTML="  密码必须大于8位数"
            document.getElementById("pwd2").style.color="red"
        }
    }


</script>
</body>
</html>